<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  Card,
  Col,
  Form,
  FormItem,
  Input,
  message,
  Modal,
  Progress,
  Row,
  Select,
  SelectOption,
  Space,
  Table,
  Tag,
  Textarea,
} from 'ant-design-vue';

import StatisticsCard from '#/components/hotel/StatisticsCard.vue';

// 状态管理
const loading = ref(false);
const showAddControllerModal = ref(false);
const isEdit = ref(false);
const selectedPeriod = ref('today');

// 表单引用
const controllerFormRef = ref();

// 统计数据
const statistics = reactive({
  totalControllers: 8,
  totalChange: 1,
  onlineControllers: 7,
  onlineChange: 1,
  offlineControllers: 1,
  offlineChange: 0,
  todayOperations: 45,
  operationsChange: 8,
});

// 控制器类型统计
const controllerCounts = reactive({
  lighting: 3,
  hvac: 2,
  curtain: 1,
  audio: 1,
  security: 1,
  irrigation: 0,
});

const controllerStatus = reactive({
  lighting: 'normal',
  hvac: 'normal',
  curtain: 'normal',
  audio: 'normal',
  security: 'normal',
  irrigation: 'normal',
});

// 搜索表单
const searchForm = reactive({
  name: '',
  type: '',
  status: '',
  location: '',
});

// 控制器表单
const controllerForm = reactive({
  name: '',
  type: '',
  model: '',
  manufacturer: '',
  location: '',
  ipAddress: '',
  port: '',
  status: 'online',
  description: '',
});

// 表单验证规则
const controllerRules = {
  name: [{ required: true, message: '请输入控制器名称' }],
  type: [{ required: true, message: '请选择控制器类型' }],
  location: [{ required: true, message: '请输入安装位置' }],
  ipAddress: [{ required: true, message: '请输入IP地址' }],
};

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
});

const logPagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
});

// 日志时间段
const logPeriods = [
  { label: '今日', value: 'today' },
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' },
  { label: '全部', value: 'all' },
];

// 控制器数据
const controllers = ref([
  {
    id: 1,
    name: '照明控制器-大厅',
    controllerId: 'LIGHT001',
    type: 'lighting',
    status: 'online',
    currentState: '开启',
    stateDetail: '亮度: 80%',
    power: 85,
    lastOperationTime: '2024-01-19 15:30',
    lastOperationType: '远程开启',
    model: 'LC-100',
    manufacturer: '飞利浦',
    ipAddress: '192.168.1.101',
  },
  {
    id: 2,
    name: '空调控制器-101',
    controllerId: 'HVAC001',
    type: 'hvac',
    status: 'running',
    currentState: '制冷',
    stateDetail: '温度: 24°C',
    power: 92,
    lastOperationTime: '2024-01-19 15:25',
    lastOperationType: '温度调节',
    model: 'HC-200',
    manufacturer: '大金',
    ipAddress: '192.168.1.102',
  },
  {
    id: 3,
    name: '窗帘控制器-大厅',
    controllerId: 'CURTAIN001',
    type: 'curtain',
    status: 'online',
    currentState: '关闭',
    stateDetail: '开度: 0%',
    power: 78,
    lastOperationTime: '2024-01-19 15:20',
    lastOperationType: '关闭窗帘',
    model: 'CC-100',
    manufacturer: '杜亚',
    ipAddress: '192.168.1.103',
  },
  {
    id: 4,
    name: '音响控制器-大厅',
    controllerId: 'AUDIO001',
    type: 'audio',
    status: 'offline',
    currentState: '离线',
    stateDetail: '无法连接',
    power: 0,
    lastOperationTime: '2024-01-19 14:30',
    lastOperationType: '播放音乐',
    model: 'AC-100',
    manufacturer: 'BOSE',
    ipAddress: '192.168.1.104',
  },
]);

// 操作日志数据
const operationLogs = ref([
  {
    id: 1,
    controllerName: '照明控制器-大厅',
    operationType: 'turn_on',
    operationTime: '2024-01-19 15:30',
    operator: '系统',
    result: 'success',
    details: '远程开启照明',
  },
  {
    id: 2,
    controllerName: '空调控制器-101',
    operationType: 'adjust',
    operationTime: '2024-01-19 15:25',
    operator: '张三',
    result: 'success',
    details: '温度调节至24°C',
  },
  {
    id: 3,
    controllerName: '窗帘控制器-大厅',
    operationType: 'turn_off',
    operationTime: '2024-01-19 15:20',
    operator: '系统',
    result: 'success',
    details: '关闭窗帘',
  },
  {
    id: 4,
    controllerName: '音响控制器-大厅',
    operationType: 'play',
    operationTime: '2024-01-19 14:30',
    operator: '李四',
    result: 'failed',
    details: '设备离线，操作失败',
  },
]);

// 表格列定义
const columns = [
  {
    title: '控制器名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: '控制器类型',
    dataIndex: 'type',
    key: 'type',
    width: 120,
  },
  {
    title: '控制器状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '当前状态',
    dataIndex: 'currentState',
    key: 'currentState',
    width: 150,
  },
  {
    title: '电量',
    dataIndex: 'power',
    key: 'power',
    width: 120,
  },
  {
    title: '最后操作',
    dataIndex: 'lastOperation',
    key: 'lastOperation',
    width: 200,
  },
  {
    title: '操作',
    key: 'action',
    width: 250,
    fixed: 'right',
  },
];

// 日志表格列定义
const logColumns = [
  {
    title: '控制器名称',
    dataIndex: 'controllerName',
    key: 'controllerName',
    width: 200,
  },
  {
    title: '操作类型',
    dataIndex: 'operationType',
    key: 'operationType',
    width: 100,
  },
  {
    title: '操作时间',
    dataIndex: 'operationTime',
    key: 'operationTime',
    width: 150,
  },
  {
    title: '操作人',
    dataIndex: 'operator',
    key: 'operator',
    width: 100,
  },
  {
    title: '操作结果',
    dataIndex: 'result',
    key: 'result',
    width: 100,
  },
  {
    title: '操作详情',
    dataIndex: 'details',
    key: 'details',
    width: 200,
  },
];

// 过滤后的控制器数据
const filteredControllers = computed(() => {
  let result = controllers.value;

  if (searchForm.name) {
    result = result.filter((item) =>
      item.name.toLowerCase().includes(searchForm.name.toLowerCase()),
    );
  }

  if (searchForm.type) {
    result = result.filter((item) => item.type === searchForm.type);
  }

  if (searchForm.status) {
    result = result.filter((item) => item.status === searchForm.status);
  }

  if (searchForm.location) {
    result = result.filter((item) =>
      item.location.toLowerCase().includes(searchForm.location.toLowerCase()),
    );
  }

  return result;
});

// 类型相关函数
const getTypeColor = (type: string) => {
  const colors: Record<string, string> = {
    lighting: 'blue',
    hvac: 'green',
    curtain: 'orange',
    audio: 'purple',
    security: 'red',
    irrigation: 'cyan',
  };
  return colors[type] || 'default';
};

const getTypeText = (type: string) => {
  const texts: Record<string, string> = {
    lighting: '照明控制器',
    hvac: '空调控制器',
    curtain: '窗帘控制器',
    audio: '音响控制器',
    security: '安防控制器',
    irrigation: '灌溉控制器',
  };
  return texts[type] || type;
};

// 状态相关函数
const getStatusColor = (status: string) => {
  const colors: Record<string, string> = {
    online: 'green',
    offline: 'red',
    running: 'blue',
    normal: 'green',
  };
  return colors[status] || 'default';
};

const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    online: '在线',
    offline: '离线',
    running: '运行中',
    normal: '正常',
  };
  return texts[status] || status;
};

// 电量相关函数
const getPowerColor = (power: number) => {
  if (power > 80) return '#52c41a';
  if (power > 50) return '#faad14';
  return '#f5222d';
};

// 操作相关函数
const getOperationColor = (type: string) => {
  const colors: Record<string, string> = {
    turn_on: 'green',
    turn_off: 'red',
    adjust: 'blue',
    play: 'purple',
  };
  return colors[type] || 'default';
};

const getOperationText = (type: string) => {
  const texts: Record<string, string> = {
    turn_on: '开启',
    turn_off: '关闭',
    adjust: '调节',
    play: '播放',
  };
  return texts[type] || type;
};

const getResultColor = (result: string) => {
  const colors: Record<string, string> = {
    success: 'green',
    failed: 'red',
  };
  return colors[result] || 'default';
};

const getResultText = (result: string) => {
  const texts: Record<string, string> = {
    success: '成功',
    failed: '失败',
  };
  return texts[result] || result;
};

// 事件处理函数
const refreshControllers = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    message.success('控制器状态刷新完成');
  }, 1000);
};

const filterByType = (type: string) => {
  searchForm.type = type;
  handleSearch();
};

const handleSearch = () => {
  pagination.current = 1;
  message.success('搜索完成');
};

const handleReset = () => {
  Object.assign(searchForm, {
    name: '',
    type: '',
    status: '',
    location: '',
  });
  pagination.current = 1;
  message.success('重置完成');
};

const handleSaveController = async () => {
  try {
    await controllerFormRef.value.validate();
    if (isEdit.value) {
      message.success('控制器信息更新成功');
    } else {
      message.success('控制器添加成功');
    }
    showAddControllerModal.value = false;
    resetControllerForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancelController = () => {
  showAddControllerModal.value = false;
  resetControllerForm();
};

const viewController = (record: any) => {
  message.info(`查看控制器详情: ${record.name}`);
};

const controlDevice = (record: any) => {
  message.info(`控制设备: ${record.name}`);
};

const editController = (record: any) => {
  isEdit.value = true;
  Object.assign(controllerForm, record);
  showAddControllerModal.value = true;
};

const configureScene = (record: any) => {
  message.info(`配置场景: ${record.name}`);
};

const resetControllerForm = () => {
  Object.assign(controllerForm, {
    name: '',
    type: '',
    model: '',
    manufacturer: '',
    location: '',
    ipAddress: '',
    port: '',
    status: 'online',
    description: '',
  });
  isEdit.value = false;
};

onMounted(() => {
  // 初始化数据
  pagination.total = controllers.value.length;
  logPagination.total = operationLogs.value.length;
});
</script>

<template>
  <div class="controllers-management">
    <div class="page-header">
      <h2>控制器管理</h2>
      <Space>
        <Button @click="refreshControllers">
          <IconifyIcon icon="ant-design:reload-outlined" />
          刷新状态
        </Button>
        <Button type="primary" @click="showAddControllerModal = true">
          <IconifyIcon icon="ant-design:plus-outlined" />
          添加控制器
        </Button>
      </Space>
    </div>

    <!-- 控制器统计 -->
    <Row :gutter="16" class="statistics-row">
      <Col :span="6">
        <StatisticsCard
          title="控制器总数"
          :value="statistics.totalControllers"
          :change="statistics.totalChange"
          icon="ant-design:control-outlined"
          color="#1890ff"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="在线控制器"
          :value="statistics.onlineControllers"
          :change="statistics.onlineChange"
          icon="ant-design:check-circle-outlined"
          color="#52c41a"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="离线控制器"
          :value="statistics.offlineControllers"
          :change="statistics.offlineChange"
          icon="ant-design:close-circle-outlined"
          color="#f5222d"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="今日操作"
          :value="statistics.todayOperations"
          :change="statistics.operationsChange"
          icon="ant-design:play-circle-outlined"
          color="#722ed1"
        />
      </Col>
    </Row>

    <!-- 控制器类型分布 -->
    <Row :gutter="16" class="controller-types">
      <Col :span="6">
        <Card class="type-card" @click="filterByType('lighting')">
          <div class="type-content">
            <IconifyIcon icon="ant-design:bulb-outlined" class="type-icon" />
            <div class="type-info">
              <div class="type-name">照明控制器</div>
              <div class="type-count">{{ controllerCounts.lighting }}个</div>
              <div class="type-status">
                <Tag :color="getStatusColor(controllerStatus.lighting)">
                  {{ getStatusText(controllerStatus.lighting) }}
                </Tag>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col :span="6">
        <Card class="type-card" @click="filterByType('hvac')">
          <div class="type-content">
            <IconifyIcon
              icon="ant-design:thermometer-outlined"
              class="type-icon"
            />
            <div class="type-info">
              <div class="type-name">空调控制器</div>
              <div class="type-count">{{ controllerCounts.hvac }}个</div>
              <div class="type-status">
                <Tag :color="getStatusColor(controllerStatus.hvac)">
                  {{ getStatusText(controllerStatus.hvac) }}
                </Tag>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col :span="6">
        <Card class="type-card" @click="filterByType('curtain')">
          <div class="type-content">
            <IconifyIcon icon="ant-design:border-outlined" class="type-icon" />
            <div class="type-info">
              <div class="type-name">窗帘控制器</div>
              <div class="type-count">{{ controllerCounts.curtain }}个</div>
              <div class="type-status">
                <Tag :color="getStatusColor(controllerStatus.curtain)">
                  {{ getStatusText(controllerStatus.curtain) }}
                </Tag>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col :span="6">
        <Card class="type-card" @click="filterByType('audio')">
          <div class="type-content">
            <IconifyIcon icon="ant-design:sound-outlined" class="type-icon" />
            <div class="type-info">
              <div class="type-name">音响控制器</div>
              <div class="type-count">{{ controllerCounts.audio }}个</div>
              <div class="type-status">
                <Tag :color="getStatusColor(controllerStatus.audio)">
                  {{ getStatusText(controllerStatus.audio) }}
                </Tag>
              </div>
            </div>
          </div>
        </Card>
      </Col>
    </Row>

    <!-- 控制器列表 -->
    <Card title="控制器列表" class="controllers-list-card">
      <div class="list-header">
        <Form layout="inline" :model="searchForm" class="search-form">
          <FormItem label="控制器名称">
            <Input
              v-model:value="searchForm.name"
              placeholder="请输入控制器名称"
              allow-clear
            />
          </FormItem>
          <FormItem label="控制器类型">
            <Select
              v-model:value="searchForm.type"
              placeholder="请选择类型"
              allow-clear
              style="width: 120px"
            >
              <SelectOption value="lighting">照明控制器</SelectOption>
              <SelectOption value="hvac">空调控制器</SelectOption>
              <SelectOption value="curtain">窗帘控制器</SelectOption>
              <SelectOption value="audio">音响控制器</SelectOption>
              <SelectOption value="security">安防控制器</SelectOption>
              <SelectOption value="irrigation">灌溉控制器</SelectOption>
            </Select>
          </FormItem>
          <FormItem label="控制器状态">
            <Select
              v-model:value="searchForm.status"
              placeholder="请选择状态"
              allow-clear
              style="width: 120px"
            >
              <SelectOption value="online">在线</SelectOption>
              <SelectOption value="offline">离线</SelectOption>
              <SelectOption value="running">运行中</SelectOption>
            </Select>
          </FormItem>
          <FormItem label="安装位置">
            <Input
              v-model:value="searchForm.location"
              placeholder="请输入安装位置"
              allow-clear
            />
          </FormItem>
          <FormItem>
            <Space>
              <Button type="primary" @click="handleSearch">
                <IconifyIcon icon="ant-design:search-outlined" />
                搜索
              </Button>
              <Button @click="handleReset">
                <IconifyIcon icon="ant-design:reload-outlined" />
                重置
              </Button>
            </Space>
          </FormItem>
        </Form>
      </div>
      <Table
        :columns="columns"
        :data-source="filteredControllers"
        :pagination="pagination"
        :loading="loading"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <div class="controller-info">
              <div class="controller-name">{{ record.name }}</div>
              <div class="controller-id">ID: {{ record.controllerId }}</div>
            </div>
          </template>
          <template v-else-if="column.key === 'type'">
            <Tag :color="getTypeColor(record.type)">
              {{ getTypeText(record.type) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'status'">
            <Tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'currentState'">
            <div class="state-info">
              <div class="state-display">{{ record.currentState }}</div>
              <div class="state-detail">{{ record.stateDetail }}</div>
            </div>
          </template>
          <template v-else-if="column.key === 'power'">
            <div class="power-info">
              <Progress
                :percent="record.power"
                :stroke-color="getPowerColor(record.power)"
                :show-info="false"
                size="small"
              />
              <span class="power-text">{{ record.power }}%</span>
            </div>
          </template>
          <template v-else-if="column.key === 'lastOperation'">
            <div class="operation-info">
              <div class="operation-time">{{ record.lastOperationTime }}</div>
              <div class="operation-type">{{ record.lastOperationType }}</div>
            </div>
          </template>
          <template v-else-if="column.key === 'action'">
            <Space>
              <Button type="link" size="small" @click="viewController(record)">
                查看
              </Button>
              <Button type="link" size="small" @click="controlDevice(record)">
                控制
              </Button>
              <Button type="link" size="small" @click="editController(record)">
                编辑
              </Button>
              <Button type="link" size="small" @click="configureScene(record)">
                场景
              </Button>
            </Space>
          </template>
        </template>
      </Table>
    </Card>

    <!-- 操作日志 -->
    <Card title="操作日志" class="logs-card">
      <div class="logs-header">
        <Space>
          <Button
            v-for="period in logPeriods"
            :key="period.value"
            :type="selectedPeriod === period.value ? 'primary' : 'default'"
            size="small"
            @click="selectedPeriod = period.value"
          >
            {{ period.label }}
          </Button>
        </Space>
      </div>
      <Table
        :columns="logColumns"
        :data-source="operationLogs"
        :pagination="logPagination"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'controllerName'">
            <span class="controller-name">{{ record.controllerName }}</span>
          </template>
          <template v-else-if="column.key === 'operationType'">
            <Tag :color="getOperationColor(record.operationType)">
              {{ getOperationText(record.operationType) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'result'">
            <Tag :color="getResultColor(record.result)">
              {{ getResultText(record.result) }}
            </Tag>
          </template>
        </template>
      </Table>
    </Card>

    <!-- 添加控制器弹窗 -->
    <Modal
      v-model:open="showAddControllerModal"
      title="添加控制器"
      width="700px"
      @ok="handleSaveController"
      @cancel="handleCancelController"
    >
      <Form
        ref="controllerFormRef"
        :model="controllerForm"
        :rules="controllerRules"
        layout="vertical"
      >
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="控制器名称" name="name">
              <Input
                v-model:value="controllerForm.name"
                placeholder="请输入控制器名称"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="控制器类型" name="type">
              <Select
                v-model:value="controllerForm.type"
                placeholder="请选择控制器类型"
              >
                <SelectOption value="lighting">照明控制器</SelectOption>
                <SelectOption value="hvac">空调控制器</SelectOption>
                <SelectOption value="curtain">窗帘控制器</SelectOption>
                <SelectOption value="audio">音响控制器</SelectOption>
                <SelectOption value="security">安防控制器</SelectOption>
                <SelectOption value="irrigation">灌溉控制器</SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="控制器型号" name="model">
              <Input
                v-model:value="controllerForm.model"
                placeholder="请输入控制器型号"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="控制器厂商" name="manufacturer">
              <Input
                v-model:value="controllerForm.manufacturer"
                placeholder="请输入控制器厂商"
              />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="安装位置" name="location">
              <Input
                v-model:value="controllerForm.location"
                placeholder="请输入安装位置"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="IP地址" name="ipAddress">
              <Input
                v-model:value="controllerForm.ipAddress"
                placeholder="请输入IP地址"
              />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="端口号" name="port">
              <Input
                v-model:value="controllerForm.port"
                placeholder="请输入端口号"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="控制器状态" name="status">
              <Select
                v-model:value="controllerForm.status"
                placeholder="请选择控制器状态"
              >
                <SelectOption value="online">在线</SelectOption>
                <SelectOption value="offline">离线</SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="控制器描述" name="description">
          <Textarea
            v-model:value="controllerForm.description"
            placeholder="请输入控制器描述"
            :rows="3"
          />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<style scoped>
.controllers-management {
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.statistics-row {
  margin-bottom: 24px;
}

.controller-types {
  margin-bottom: 24px;
}

.type-card {
  cursor: pointer;
  transition: all 0.3s;
}

.type-card:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}

.type-content {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
}

.type-icon {
  font-size: 32px;
  color: #1890ff;
}

.type-info {
  flex: 1;
}

.type-name {
  margin-bottom: 4px;
  font-weight: 500;
}

.type-count {
  margin-bottom: 4px;
  font-size: 12px;
  color: #666;
}

.controllers-list-card {
  margin-bottom: 24px;
}

.list-header {
  margin-bottom: 16px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.controller-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.controller-name {
  font-weight: 500;
  color: #1890ff;
  cursor: pointer;
}

.controller-name:hover {
  text-decoration: underline;
}

.controller-id {
  font-size: 12px;
  color: #999;
}

.state-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.state-display {
  font-weight: 500;
  color: #1890ff;
}

.state-detail {
  font-size: 12px;
  color: #999;
}

.power-info {
  display: flex;
  gap: 8px;
  align-items: center;
}

.power-text {
  min-width: 30px;
  font-size: 12px;
  font-weight: 500;
}

.operation-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.operation-time {
  font-size: 12px;
  color: #666;
}

.operation-type {
  font-size: 12px;
  color: #999;
}

.logs-card {
  margin-bottom: 16px;
}

.logs-header {
  margin-bottom: 16px;
}

:deep(.ant-card-body) {
  padding: 12px;
}

:deep(.ant-table-thead > tr > th) {
  font-weight: 500;
  background-color: #fafafa;
}
</style>
